import React, { Component } from 'react';
import { Message, Form, Radio, Input, Loading } from '@alifd/next';
import Uploader from '../../../components/Uploader';
import CosUploader from '../../../components/CosUploader';
import request from '../../../utils/request';

const FormItem = Form.Item;

export default class EditorGallery extends Component {
  static displayName = 'EditorGallery';

  constructor(props) {
    super(props);
    const categories = [
      { value: '笑话', label: '笑话' },
      { value: 'COSPLAY', label: 'COSPLAY' },
      { value: '动漫图片', label: '动漫图片' },
      { value: '人物', label: '人物' },
      { value: '风景', label: '风景' },
      { value: '壁纸', label: '壁纸' },
    ];
    this.state = {
      categories,
      selectCategory: categories[0].value,
      loading: false,
      pictureItems: [],
      detailData: {},
    };
  }

  componentDidMount() {
    this.getDetail(this.props.match.params.id);
  }

  getDetail = (id) => {
    this.setState({
      loading: true,
    });
    request.get(`/gallery/detail-for-update/${id}`).then((res) => {
      if (res.code === 200) {
        const pictureItemsData = res.data.pictureItems || [];
        const pictureItems = pictureItemsData.map((item) => {
          return {
            link: item.link,
            id: item.id,
          };
        });
        this.setState({
          detailData: res.data,
          selectCategory: res.data.category || '',
          pictureItems,
        });
      }
    }).finally(() => {
      this.setState({
        loading: false,
      });
    });
  }

  handleSubmit = (data, validate) => {
    if (validate) {
      return false;
    }
    const covers = this.uploaderItem.getFiles() || '';
    const formData = Object.assign(data, {
      covers,
    });
    this.setState({
      loading: true,
    });
    request.post('/gallery', formData).then((res) => {
      if (res.code === 200) {
        Message.success('保存成功');
        this.props.history.push('/gallery');
      } else {
        Message.error('保存失败');
      }
    }).finally(() => {
      this.setState({
        loading: false,
      });
    });
  }

  radioChange = (selectCategory) => {
    this.setState({
      selectCategory,
    });
  }

  titleChange = (value) => {
    const { detailData } = this.state;
    detailData.title = value;
    this.setState({
      detailData,
    });
  }

  onUpload = (list) => {
    console.log('list', list);
  }
  render() {
    const { loading, categories, selectCategory, detailData, pictureItems } = this.state;
    return (
      <div className="card-bg">
        <Loading visible={loading} shape="fusion-reactor" style={{ display: 'block' }}>
          <Form style={{ width: '60%' }}>
            <FormItem label="图片">
              <CosUploader ref={(c) => { this.uploaderItem = c; }} onUpload={this.onUpload.bind(this)} files={pictureItems} detailId={detailData.id} author={detailData.author} detailTable="gallery" />
            </FormItem>
            <FormItem label="分类:">
              <Radio.Group dataSource={categories} value={selectCategory} name="category" onChange={this.radioChange} />
            </FormItem>
            <FormItem label="描述:" required requiredMessage="描述为必填">
              <Input.TextArea name="title" placeholder="输入描述" value={detailData.title || ''} onChange={this.titleChange} />
            </FormItem>
            <div style={{ display: 'none' }}>
              <FormItem label="id:" required >
                <Input name="id" value={detailData.id || ''} />
              </FormItem>
            </div>
            <FormItem label="">
              <Form.Submit validate onClick={this.handleSubmit}>提交</Form.Submit>
            </FormItem>
          </Form>
        </Loading>
      </div>
    );
  }
}
